<template>
    <div class="select-box">
        <el-select :modelValue="modelValue" placeholder="请选择图标" style="width: 240px"
            @change="handleChange"
            filterable
        >
            <el-option
                v-for="item in icons"
                :key="item"
                :label="item"
                :value="item"
            >
                <div class="icon-box">
                    <el-icon size="16">
                        <component :is="item"/>
                    </el-icon>
                    <span class="icon-name">{{ item }}</span>
                </div>
            </el-option>
        </el-select>
        <el-icon size="20" class="outIcon">
            <component :is="modelValue"/>
        </el-icon>
    </div>
</template>

<script setup>
import * as iconList from '@element-plus/icons-vue'
import { ref } from 'vue';

defineProps({
    modelValue:String
})
const icons = ref(Object.keys(iconList))

let emit = defineEmits(["update:modelValue"])

const handleChange = (icon)=>{
    emit("update:modelValue",icon)    
}
</script>

<style lang="less" scoped>
.select-box{
    display: flex;
    align-items: center;
    .outIcon{
        margin-left:.625rem;
    }         
}
.icon-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}  

</style>